<template>
  <div class="nav-user-center">
    <template v-if="!token">
      <transition name="nav-animation">
        <mivaLink class="signin-btn transition_d" to="/login" v-if="show">
          <el-avatar class="avatar" icon="el-icon-user-solid" />登录/注册
        </mivaLink>
      </transition>
    </template>
    <template v-else>
      <transition name="account-animation">
        <signinModule class="transition_d" style="margin-right:10px" v-if="show" />
      </transition>
      <transition name="nav-animation">
        <navModule :navs="navData" class="transition_d" v-if="show" />
      </transition>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import signinModule from './private-components/signin.vue';
import navModule from '@/components/header/head/headNav.vue';

export default {
    components: {
        signinModule,
        navModule,
    },
    props: {
        show: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            navData: [
                { to: '/', name: '消息', component: 'el-image' },
                { to: '/', name: '历史', component: 'el-image' },
                { to: '/', name: '收藏', component: 'el-image' },
            ],
        };
    },
    computed: {
        ...mapGetters(['token']),
    },
};
</script>


<style lang="less">
.nav-user-center {
  position: relative;
  display: flex;
  .signin-btn {
    width: 120px;
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    z-index: 2;
  }
  .avatar {
    margin-right: 10px;
    position: relative;
    z-index: 1;
    transform: scale(0.9, 0.9);
    border: 1px solid #ddd;
  }

  .transition_d {
    transition: all 0.5s;
  }

  .account-animation-enter,
  .account-animation-leave-to {
    opacity: 0;
    transform: scale(0);
  }

  .account-animation-enter-to,
  .account-animation-leave {
    opacity: 1;
    transform: scale(1);
  }

  .menu-nav {
    transition: all 0.5s;
  }

  .nav-animation-enter,
  .nav-animation-leave-to {
    opacity: 0;
    transform: translateX(-50px);
  }

  .nav-animation-enter-to,
  .nav-animation-leave {
    opacity: 1;
    transform: translateX(0px);
  }
}
</style>
